<div class="row m-2">
    <div class="col-4">
        <form class="m-2" novalidate (ngSubmit)="submitForm()">
            <div class="form-group">
                <label>Name</label>
                <input class="form-control" name="name" 
                    [(ngModel)]="newProduct.name" />
            </div>
            <div class="form-group">
                <label>Category</label>
                <input class="form-control" name="category" 
                    [(ngModel)]="newProduct.category" />
            </div>      
            <div class="form-group">
                <label>Price</label>
                <input class="form-control" name="price" 
                    [(ngModel)]="newProduct.price" />
            </div>      
            <button class="btn btn-primary" type="submit">Create</button>
        </form>
    </div>
    <div class="col-8">

        <div class="checkbox">
            <label>
                <input type="checkbox" [(ngModel)]="darkColor" />
                Dark Cell Color
            </label>
        </div>
        
        <table class="table table-sm table-bordered table-striped" 
                [paCellDarkColor]="darkColor">
    
        
    <thead>
        <tr><th></th><th>Name</th><th>Category</th><th>Price</th><th></th></tr>
    </thead>
    <tbody>
        <tr *paFor="let item of getProducts(); let i = index; let odd = odd;
                let even = even" [class.bg-info]="odd" 
                [class.bg-warning]="even">
            <td style="vertical-align:middle">{{i + 1}}</td>
            <td style="vertical-align:middle">{{item.name}}</td>
            <td style="vertical-align:middle">{{item.category}}</td>
            <td style="vertical-align:middle">{{item.price}}</td>
            <td class="text-center">
                <button class="btn btn-danger btn-sm" 
                        (click)="deleteProduct(item.id)">
                    Delete
                </button>
            </td>                
        </tr>
    </tbody>
</table>

    </div>
</div>
